<script lang="ts" setup>

import applicationApi from '@/api/application'
import { debounce } from 'lodash'
import { ref } from 'vue'
const props = withDefaults(
  defineProps<{
    appId: string
    apiKey?: string
    showFileList: boolean
    maxFiles: number
    name: string,
    tip: string
    accept: any
  }>(),
  {
    showFileList: true,
    accept: '.docx, .doc'
  }
)
const emit = defineEmits(['update'])
const fileList: any = ref([])

const uploadFile = debounce(async () => {
  const formData = new FormData()
  for (const file of fileList.value) {
    if (!file.url) {
      file.loading = true
    }
    formData.append('file', file.raw, file.name)
  }
  if (props.apiKey) {
    const chatData: any = await applicationApi.getChatOtherOpen(props.appId, props.apiKey)
    applicationApi
    .uploadFile(
      props.appId,
      chatData?.data,
      formData,
    )
    .then((response) => {
      fileList.value = response.data.map((v: any) => ({ ...v, loading: false }))
      emit('update', fileList.value, chatData?.data)
    })
  } else {
    emit('update', fileList.value)
  }
}, 500)

const onDelFile = (index: number) => {
  fileList.value.splice(index, 1)
}

function getProgress (loading: boolean) {
  return loading ? Math.random() * 60 + 40 : 100
}
</script>

<template>
  <el-upload
    action="#"
    drag
    multiple
    :limit="props.maxFiles"
    v-model:file-list="fileList"
    :auto-upload="true"
    :show-file-list="false"
    :accept="props.accept"
    :http-request="uploadFile"
  >
  <div class="upload-file">
    <img src="@/assets/agent/chat/uploadFile.svg" alt="">
    <slot>
      <div class="upload-file-title">
        拖拽{{ props.name }}至此上传，或 <el-link>选择文件</el-link>
      </div>
      <div class="upload-file-info" v-html="tip">
      </div>
    </slot>
  </div>
  </el-upload>
  <div class="upload-list-wrap" v-if="props.showFileList">
    <el-row
        v-for="(item, index) in fileList"
        :key="index"
        :gutter="10"
        class="upload-file-item">
      <el-col :span="12">
        <div class="upload-file-item-row">
          <div style="margin-right: 2px">
            <img v-if="item.loading" class="icon-loading" src="@/assets/agent/chat/loading-s.svg" alt="">
            <img v-else class="icon-file" src="@/assets/agent/chat/file.svg" alt="">
          </div>
          <div class="upload-file-item-row-name">{{ item.name }}</div>
        </div>
      </el-col>
      <el-col class="upload-file-item-row" :span="12" style="justify-content: right">
        <el-progress v-if="getProgress(item.loading) !== 100" class="upload-file-item-row-progress" :text-inside="true" :show-text="false" :stroke-width="12" :percentage="getProgress(item.loading)" />
        <div class="upload-file-item-row-right">
          <img src="@/assets/agent/chat/shanchu.svg" alt="" style="cursor: pointer" @click="onDelFile(index)">
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<style scoped lang="scss">
.upload-file {
  margin-top: 20px;
  height: 100px;
  &-title {
    font-weight: 400;
    font-size: 14px;
    color: #333333;
    line-height: 21px;
  }
  &-info {
    font-weight: 400;
    font-size: 12px;
    color: rgba(0,0,0,0.4);
    line-height: 18px;
  }
}
.upload-list-wrap {
  max-height: 400px;
  overflow-y: auto;
}
.upload-file-item {
  padding: 12px 16px;
  margin-top: 10px;
  align-items: center;
  background: #fff;
  border-radius: 8px;
  &-row {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    .icon-loading, .icon-file {
      position: relative;
      top: 1px;
      margin-right: 2px;
    }
    .icon-loading {
      animation: loading 1s linear infinite !important;
    }
    &-name {
      width: calc(100% - 20px);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    &-progress {
      width: 80%;
    }
    &-right {
      width: 20%;
      text-align: right;
      .rotate90 {
        transform: rotate(90deg);
      }

    }
  }

}
</style>
